import styled from "styled-components";

export const Wrapper = styled.div`
  height: 100%;
  position: relative;

  .sync-btn {
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    color: white;
    background: grey;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 200ms;
    cursor: pointer;

    &:hover {
      background: #004fc5;
      transform: rotate(360deg);
    }
  }

  .note-controller {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: content-box;

    &__left {
      display: flex;
      align-items: center;

      & > span {
        margin-left: 10px;
      }
    }

    button {
      margin-left: 10px;
    }
  }

  .note-list {
    height: calc(100% - 53px);
    overflow: auto;

    > * {
      border-bottom: 1px solid hsl(var(--border));
    }
  }
`;
